<div class="picture-box">
	<template v-if="imagesData.iniframe">
		<iframe 
			style="border: 0px;"
			:src="imagesData.iniframe" 
			width="100%" 
			height="100%"></iframe>
	</template>
	<template v-else>
		<el-scrollbar class="page-component__scroll" id="ImgScroll" ref="scrollImg" @mousedown.native="imageDrag">
			<img
				:src="imagesData.icondata"
				class="image-viewer__img max thumbnail" />
			<img 
				@load="imageload"
				:src="(parseInt(imagesData.download) || parseInt(DocumentAdminId)) && imagesData.originalimg?imagesData.originalimg:imagesData.icondata"
				class="image-viewer__img max opacity" />	
		</el-scrollbar>
	</template>
</div>
<script type="text/javascript">
	var ImageMixin = {
		methods:{
			imageTransform(){
				var self = this;
				var str = '';
				if(self.ImgParam.rotate != 0){
					str += ' rotate('+self.ImgParam.rotate+'deg)';
				}
				if(self.ImgParam.scaleX != 0){
					str += ' scaleX('+self.ImgParam.scaleX+')';
				}
				if(self.ImgParam.scaleY != 0){
					str += ' scaleY('+self.ImgParam.scaleY+')';
				}
				var img = document.querySelector('.image-viewer__img');
				img.style.transform=str;
					
			},
			imageSize(proportion){
				var self = this;
				// if(self.ImgParam.LoadFirst){
				// 	self.ImgParam.LoadFirst = false;
				// 	return false;
				// }
				var ImgScroll = document.getElementById('ImgScroll');
				var img = document.querySelector('.image-viewer__img');
				var wrap = document.querySelector('#ImgScroll .el-scrollbar__wrap');
				var canva = document.querySelector('#ImgScroll .el-scrollbar__view');
				
				if(this.imagesData.opentype == 'other'){
					var width = parseFloat(this.imagesData.iconwidth);
					var height = parseFloat(this.imagesData.iconheight);
				}else{
					var width = parseFloat(this.imagesData.width);
					var height = parseFloat(this.imagesData.height);
				}
				var fwidth = width*proportion;
				var fheight = height*proportion;
				var owidth = fwidth-img.clientWidth;
				var oheight = fheight-img.clientHeight;
				var pwidth = ImgScroll.clientWidth-(ImgScroll.clientWidth/5);
				var pheight = ImgScroll.clientHeight-(ImgScroll.clientHeight/5);
				canva.style.lineHeight = ImgScroll.clientHeight+'px';
				if(fwidth>ImgScroll.clientWidth){
					img.style.cssText = 'max-width: "";width:'+fwidth+'px';
					wrap.scrollLeft += owidth/2;
					
				}else{
					img.style.cssText = 'max-width: "";width:'+fwidth+'px';
				}
				if(fheight>ImgScroll.clientHeight){
					img.style.cssText = 'max-height: "";height:'+fheight+'px';
					wrap.scrollTop += oheight/2;
				}else{
					img.style.cssText = 'max-height: "";height:'+fheight+'px';
				}
				if(fheight>ImgScroll.clientHeight || fwidth>ImgScroll.clientWidth){
					
					ImgScroll.classList.add = 'move';
				}else{
					ImgScroll.classList.remove('move');
				}
				img.classList.remove('max');
				if(self.$refs.scrollImg){
					self.$refs.scrollImg.update();
				}
			},
			imageproportion(){
				var self = this;
				var val = self.ImgParam.proportion;
				this.ImgParam.fproportion = Math.round(val*100);
				self.$nextTick(function(){
					self.imageSize(val);
				});
			},
			imageload(){
				document.querySelector('.image-viewer__img.thumbnail').remove();
				document.querySelector('.image-viewer__img.max').classList.remove('opacity');
			},
			imageSet(){
				var self = this;
				var Bw = document.getElementById('ImgScroll').clientWidth;
				var Bh = document.getElementById('ImgScroll').clientHeight;
				var slider = document.querySelector('.el-slider').clientWidth;
				var Lw = 0;
				var Lh = 0;
				var proportion = 0;
				
				if(self.imagesData.opentype == 'other'){
					var Lw = parseFloat(self.imagesData.iconwidth);
					var Lh = parseFloat(self.imagesData.iconheight);
				}else{
					var Lw = parseFloat(self.imagesData.width);
					var Lh = parseFloat(self.imagesData.height);
				}
				if(Bw < Lw || Bh < Lh){
					
					var rateW =  Bw/Lw;
					var rateH = Bh/Lh;
					if(rateW>rateH){
						num = rateH;
					}else{
						num = rateW;
					}
					
					proportion = num;
				}else{
					proportion = 1;
				}
				self.ImgParam.proportion = proportion;
				var fproportion = Math.round(proportion*100);
				this.ImgParam.slider = (slider/2)*(fproportion/100);
				this.imageproportion();
			},
			imageDrag(e){//图片移动
				var self = this;
				var oDiv = document.getElementById('ImgScroll');
				var oImg = document.querySelector('.image-viewer__img');
				var wrap = oDiv.querySelector('.el-scrollbar__wrap');
				e = e ? e : window.event;
				oDiv.classList.add = 'activemove';
				var lastClientX = e.clientX;
				var lastClientY = e.clientY;
				document.onmousemove = function(e){
					e = e ? e : window.event;
					var ClientX = e.clientX;
					var ClientY = e.clientY;
							
					if(oImg.clientWidth>oDiv.clientWidth){
						wrap.scrollLeft -=(- lastClientX + (lastClientX=ClientX));
					}
					if(oImg.clientHeight>oDiv.clientHeight){
						var num  = (- lastClientY + (lastClientY=ClientY));
						wrap.scrollTop -=num;
					}
					return false; //阻止默认事件或冒泡  
				}
				document.onmouseup = function(){
					oDiv.classList.remove('activemove');
					document.onmousemove = null;
					document.onmouseup = null;
				};


				
			},
		}
	};
</script>